<!-- 活动详情 -->
<template>
	<view class="box-aty" v-if="!loading">
		<swiper class="box-aty-img" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(n,i) in getCaseimag(shopinfo.images ? shopinfo.images : '')" :key="i">
				<image style="height: 100%;width: 100%;" :src="n.img" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<view class="box-aty-detal">
			<view class="title">
				<u--text bold color="#0F0F0F" lineHeight="40rpx" size="32rpx" :lines="2"
					:text="`活动场地【${shopinfo.businessName}】${shopinfo.title}`"></u--text>
			</view>
			<view class="f-s-c">
				<text class="tag">时间</text>
				<u--text color="#0F0F0F" size="28rpx" :lines="1"
					:text="`营业时间 ${shopinfo.startTime}-${shopinfo.endTime}`"></u--text>
			</view>
			<view class="f-s-c">
				<text class="tag">地点</text>
				<u--text color="#0F0F0F" size="28rpx" :lines="3" :text="shopinfo.address"
					@click="handleAddress"></u--text>

				<view class="location">
					<uni-icons type="location" size="36rpx" color="#EC606F" @click="handleAddress"></uni-icons>
					<text>导航</text>
				</view>

				<text class="distance" v-if="shopinfo.distance">{{shopinfo.distance}}km</text>
				<view class="line"></view>
				<image class="phone" src="@/static/images/call.svg" @click="handleCall"></image>
			</view>
			<view class="f-s-c" v-if="shopinfo.amount">
				<text class="tag">费用</text>
				<u--text color="#0F0F0F" size="28rpx" :lines="1"
					:text="`工作日${shopinfo.amount}元/位，节假日${shopinfo.holidayAmount}元/位`"></u--text>
			</view>


			<view class="box-aty-dtitle" v-if="shopinfo.amount">
				选择日期
			</view>
			<view class="date" v-if="shopinfo.amount && (dateList||[]).length">
				<view class="date-button" v-for="item in dateList" :class="{ active: item.value === date }"
					:key="item.value" @click="handleSelectDate(item.value)">
					<u--text align="center" color="#0F0D21" size="24rpx" :lines="1"
						:text="`${item.label} ${formatDate(item.value)}`"></u--text>
					<!-- <text class="date-text">{{item.label}} {{formatDate(item.value)}}</text> -->
					<image v-if="item.value === date" class="select-tag" src="@/static/images/select-tag.svg"></image>
				</view>
				<view class="date-button more" @click="handleSelectMoreDate">
					<view class="desc">
						更多日期
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="box-aty-dtitle" v-if="shopinfo.amount">
				活动介绍
			</view>
			<view class="box-aty-dtitle" v-if="!shopinfo.amount">
				商家介绍
			</view>
			<view class="box-aty-hang">
				<rich-text :nodes="shopinfo.description || ''"></rich-text>
			</view>
		</view>
		<view class="box-aty-pam">
			<view class="box-aty-dtitle" style="margin-top: 0rem;">
				用户须知
			</view>
			<view class="box-aty-hang">
				<rich-text :nodes="shopinfo.notice || []"></rich-text>
			</view>
		</view>
		<view class="box-bottom" v-if="shopinfo.amount">
			<view>
				<text class="sh">订金</text>
				<text class="price">￥{{shopinfo.earnestMoney}}</text>
			</view>
			<view class="bottom-btn" @click="goPay()">
				立即预定
			</view>
		</view>

		<uv-calendars :startDate="today" :date="date" ref="calendars" @confirm="confirm" closeOnClickOverlay />


	</view>
</template>

<script>
	// 公共方法
	import {
		wxChooseLocation
	} from '@/utils/wx/wxPublick-h5.js'

	// import wx from "weixin-js-sdk"; // 引入微信sdk

	import {
		catDetail,
		reservation,
		isHoliday, // 判断是否是节假日
	} from '@/api/cityParty.js';

	import dayjs from 'dayjs';
	import {
		mapGetters
	} from 'vuex';
	export default {
		name: 'detail',
		data() {
			return {
				id: 0,
				show: false,
				NowDate: Number(new Date()),
				banners: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				shopinfo: {
					payCategory: 0,
					businessName: '',
					title: '',
					startTime: '',
					endTime: '',
					address: '',
					earnestMoney: '',
					distance: 0,
					images: ''
				},
				today: dayjs().format('YYYY-MM-DD'),
				date: '',
				dateList: [],
				mode: 'single',
				isHoliday: false,
				loading: true,

			}
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin', 'locationInfo']),
		},

		created() {
			this.updateDates()


		},

		onLoad(props) {
			this.id = props.id

			// 获取详情
			this.getcatDetail()
		},

		methods: {

			handleSelectMoreDate() {
				this.$refs.calendars.open();
			},

			/**
			 * 	拨打电话
			 */
			handleCall() {
				const that = this;
				uni.makePhoneCall({
					phoneNumber: that.shopinfo.phone,
				});
			},

			
			/**
			 * 导航-打开地图
			 */
			handleAddress() {

				let that = this
				
				
				// h5平台
				// #ifdef H5
				// 使用微信内置地图查看位置
				wxChooseLocation({
					latitude: that.shopinfo.latitude, //纬度
					longitude: that.shopinfo.longitude, //经度
					address: that.shopinfo.address, // 详细说明
					name: that.shopinfo.businessName, // 位置名
					scale: 28, // 地图缩放级别,整型值,范围从1~28。默认为最大
					infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
				})
				// #endif
				
				
				// 微信小程序平台
				// #ifdef MP-WEIXIN
				
				//使用微信内置地图查看位置
				wx.openLocation({
					latitude: parseFloat(that.shopinfo.latitude), //纬度
					longitude: parseFloat(that.shopinfo.longitude), //经度
					address: that.shopinfo.address, // 详细说明
					name: that.shopinfo.businessName, // 位置名
					scale: 28, // 地图缩放级别,整型值,范围从1~28。默认为最大
					success: res => {
						console.log('成功');
					},
					fail: err => {
						console.log('失败');
					}
				})
				// #endif
				
				// app平台
				// #ifdef APP
				// 打开内置地图查看位置
				uni.openLocation({
					latitude: parseFloat(that.shopinfo.latitude), //纬度
					longitude: parseFloat(that.shopinfo.longitude), //经度
					address: that.shopinfo.address, // 详细说明
					name: that.shopinfo.businessName, // 位置名
					success: function() {
						console.log('success');
					}
				});
				// #endif

			},



			async checkHoliday() {
				try {
					const result = await isHoliday(this.date)
					
					this.isHoliday = result.data
					if (this.isHoliday && this.shopinfo.amount) {
						this.$public.showText('您选择的日期为节假日，费用可能会有所变动哦。')
					}
					
				} catch (e) {
					this.$public.showText('请求失败')
				}

			},
			formatDate(date) {
				return dayjs(date).format('MM-DD');
			},
			handleSelectDate(value) {
				this.date = value
				this.checkHoliday();
			},
			getCaseimag(jsonString) {
				try {
					return jsonString ? JSON.parse(jsonString) : [];
				} catch (error) {
					// 在控制台中输出 JSON 解析错误
					console.error('JSON 解析错误：', error);
					// 返回一个默认值或空数组，以便在调用方代码中处理错误情况
					return []; // 或者返回一个默认值，例如：return defaultImageArray;
				}
			},

			/**
			 * 获取详情
			 */
			async getcatDetail() {
				let {
					userLng,
					userLat,
				} = this.locationInfo
				try {
					uni.showLoading({
						title: '正在加载中'
					});
					this.loading = true;
					let that = this
					let res = await catDetail(that.id, userLng, userLat)
					console.log(res, 'kankankankn');
					this.shopinfo = res.data
					if (res.code !== 200) {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: res.msg || '请求失败'
						})
						return
					}
				} catch (err) {
					console.log(err, '错误');
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title: '数据加载错误'
					})
				} finally {
					this.loading = false;
					uni.hideLoading();
				}
			},


			/**
			 * 创建运行的
			 */
			updateDates() {
				this.dateList = [{
					label: '今天',
					value: dayjs().format('YYYY-MM-DD'),
				}, {
					label: '明天',
					value: dayjs().add('1', 'd').format('YYYY-MM-DD'),
				}, {
					label: '后天',
					value: dayjs().add('2', 'd').format('YYYY-MM-DD'),
				}]
				this.date = dayjs().format('YYYY-MM-DD');
				this.checkHoliday();
			},
			confirm({
				fulldate
			}) {
				const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				if (!this.dateList.find(item => item.value === fulldate)) {
					this.dateList.splice(this.dateList.length - 1, 1, {
						label: week[dayjs(fulldate).day()],
						value: fulldate,
					});
				}
				this.date = fulldate;
				this.checkHoliday();
			},
			close() {
				this.show = false
			},
			goPay() {
				if (!this.isLogin) {
					uni.switchTab({
						url: '/pages/myTab/index'
					})
					return
				}
				const url =
					`/pages/order/submit?id=${this.id}&orderDate=${this.date}&payCategory=${this.shopinfo.payCategory}&businessName=${this.shopinfo.businessName}&title=${this.shopinfo.title}`
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.distance {
		color: #0F0F0F;
		font-size: 28rpx
	}

	.line {
		margin: 0 -20rpx;
		width: 28rpx;
		height: 0px;
		transform: rotate(90deg);
		border: 2rpx solid #D8D8D8;
	}

	.phone {
		width: 36rpx;
		height: 36rpx;
	}

	.date {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 8rpx;
		font-size: 24rpx;
		color: #0F0D21;
	}

	.date-text {
		font-size: 24rpx;
		color: #0F0D21;
	}

	.date-button {
		position: relative;
		line-height: 76rpx;
		text-align: center;
		width: 156rpx;
		height: 76rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
		border: 2rpx solid #D5CFD2;
	}

	.active {
		background: rgba(246, 164, 164, 0.15);
		box-sizing: border-box;
		border: 2rpx solid #FFBDAA;
	}

	.select-tag {
		height: 18rpx;
		width: 40rpx;
		position: absolute;
		top: -2rpx;
		left: -2rpx;
	}

	.more {
		padding-left: 20rpx;
		width: 122rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 10rpx;

		.desc {
			width: 52rpx;
			font-size: 24rpx;
			line-height: 28rpx;
			text-align: center;
			letter-spacing: 0px;
		}
	}

	.title {
		margin-bottom: 32rpx;
	}

	.f-s-c {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 14rpx;

		.location {
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				font-size: 22rpx;
				color: #999;
			}
		}
	}

	.tag {
		text-align: center;
		width: 64rpx;
		height: 32rpx;
		background: #FFF7EA;
		font-size: 24rpx;
		font-weight: 350;
		color: #E45D4E;
	}

	.box-aty-dtitle {
		margin: 32rpx 0 16rpx 0;
		font-size: 14px;
		font-weight: bold;
		line-height: 14px;
		letter-spacing: 0px;
		color: #0F0D21;
	}

	.box-aty {
		font-family: Source Han Sans CN;
		background-color: #e6e6e6;
		min-height: 100%;
		padding-bottom: 138rpx;

		&-img {
			width: 100vw;
			height: 200px;

			.img {
				width: 100%;
				height: 100%;
				border-radius: 0 !important;
			}
		}

		&-pam {
			width: 85vw;
			height: auto;
			margin: 0 auto;
			margin-top: 1rem;
			background-color: white;
			border-radius: 0.5rem;
			padding: 0.9rem;
		}

		&-detal {
			width: 85vw;
			height: auto;
			margin: 0 auto;
			margin-top: -1rem;
			z-index: 1;
			position: relative;
			background-color: white;
			border-radius: 0.5rem;
			padding: 0.9rem;
		}

		&-hang {
			font-family: Source Han Sans CN;
			font-size: 12px;
			font-weight: 350;
			line-height: 20px;
			letter-spacing: 0em;
			color: #3C4766;
			margin-top: 0.4rem;
		}

		&-dd {
			margin-top: 0.5rem;

			.t-btn {
				opacity: 1;
				font-family: Source Han Sans CN;
				font-size: 12px;
				font-weight: normal;
				line-height: 38px;
				text-align: center;
				letter-spacing: 0px;
				width: 80px !important;
				height: 38px;
				border-radius: 6px;
				opacity: 1;
				box-sizing: border-box;
				border: 1px solid #D5CFD2;
				color: #0F0D21;
				background: #FFFFFF;
				position: relative;

				.gens {
					padding: 4px 5px;
					line-height: 13px;
					height: 28px;
					display: flex;
					align-items: center;
					justify-content: space-between
				}
			}
		}

		&-title {
			width: 100%;
			border-radius: 0;
			font-family: Source Han Sans CN;
			font-size: 16px;
			font-weight: 600;
			line-height: 20px;
			letter-spacing: 0px;
			color: #0F0F0F;
		}

		&-time {
			font-family: Source Han Sans CN;
			font-size: 24rpx;
			font-weight: 350;
			line-height: 10px;
			letter-spacing: 0px;
			margin-top: 0.5rem;

			.t {
				color: #E45D4E;
				width: 64rpx;
				height: 32rpx;
				line-height: 32rpx;
				opacity: 1;
				padding: 4rpx 8rpx;
				background: #FFF7EA;
			}

			.dt {
				font-family: Source Han Sans CN;
				font-size: 14px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0px;
				color: #0F0F0F;
				white-space: nowrap;
				/* 防止文本换行 */
				overflow: hidden;
				/* 隐藏溢出部分文本 */
				text-overflow: ellipsis;
				margin-left: 1rem;
			}

		}
	}


	.displ {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.box-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		padding: 18rpx 0;
		width: 100%;
		position: fixed;
		background-color: #ffff;
		bottom: 0;
		z-index: 5;

		.price {
			font-size: 1.6rem;
			color: red;
			font-family: Source Han Sans CN;
			font-weight: normal;
		}

		.bottom-btn {
			display: flex;
			flex-direction: row;
			justify-content: initial;
			color: #ffff;
			align-items: center;
			padding: 13px 64px;
			border-radius: 2rem;
			gap: 10px;
			background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
		}
	}


	.date-picker {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16px;
	}

	.picker-text {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.picker-button button {
		background-color: #007AFF;
		color: white;
		border: none;
		padding: 10px 20px;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
</style>

<style lang="scss">
	/deep/ uni-swiper .uni-swiper-dots-horizontal {
		bottom: 30px !important;
	}
</style>